﻿<template>
  <div
    :class="['el-message', { [`el-message--${type}`]: type }, 'el-message--plain']"
    :style="customStyle"
  >
    <el-icon v-if="iconComponent" :class="['el-message__icon', `el-message-icon--${type}`]">
      <component :is="iconComponent" />
    </el-icon>
    <div class="el-message__group">
      <p v-if="title" class="el-message__content" style="margin-bottom: 5px; font-weight: bold">
        {{ title }}
      </p>
      <p class="el-message__content">{{ msg }}</p>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { TypeComponentsMap } from "element-plus/es/utils/index";

const props = defineProps({
  type: {
    type: String,
    default: "info",
    validator: (value) => ["success", "info", "warning", "error"].includes(value),
  },
  msg: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    default: "",
  },
});

const iconComponent = computed(() => TypeComponentsMap[props.type] || "");
const customStyle = computed(() => ({
  position: "relative",
  transform: "none",
  top: "auto",
  left: "auto",
}));
</script>
